<template>
    <div class="toolbar">
        <div class="dutyRoster module" :class="hiddenduty ? 'hiddenduty' : ''" @click="hiddenduty = !hiddenduty">
            <div class="title">值班表 <i class="el-icon-caret-bottom"></i></div>
            <div class="label" @click="openCaret">
                <div>值班日期：{{ dutyInfo.dutyDate || '--' }}</div>
                <div v-if="dutyInfo.leader">{{ endData.dutyOne || '值班领导' }}：{{ dutyInfo.leader }}</div>
                <div v-if="dutyInfo.officer">{{ endData.dutyTwo || '值班人员' }}：{{ dutyInfo.officer }}</div>
                <div v-if="dutyInfo.driver">{{ endData.dutyThree || '值班驾驶员' }}：{{ dutyInfo.driver }}</div>
            </div>
        </div>

        <div class="governmentAffairs module">
            <div class="title">{{ endData.rightColumnOne || "政务公开" }}</div>
            <div class="swiper mySwiper governmentAffairsSwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="swiperList, index in governmentAffairsList" :key="index">
                        <div class="label" v-for="item, i in swiperList" :key="i" @click="jumpURL(item.url)">
                            <div class="icon">
                                <img :src="item.imgUrl" alt="">
                            </div>
                            <div>{{ item.name }}</div>
                        </div>
                    </div>
                </div>
                <div class="zwgknext swiper-button-next swiper-button"></div>
                <div class="zwgkprev swiper-button-prev swiper-button"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="governmentAffairs module">
            <div class="title">{{ endData.rightColumnTwo || "常用系统" }}</div>
            <div class="swiper mySwiper systemsSwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="swiperList, index in systemsList" :key="index">
                        <div class="label" v-for="item, i in swiperList" :key="i" @click="jumpURL(item.url)">
                            <!-- <div class="icon">
                                <img :src="item.imgUrl" alt="">
                            </div> -->
                            <div style="text-align: left;">{{ item.systemName }}</div>
                        </div>
                    </div>
                </div>
                <div class="cyxtnext swiper-button-next swiper-button"></div>
                <div class="cyxtprev swiper-button-prev swiper-button"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="praise module">
            <div class="swiper mySwiper carouselChartSwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item, index in swiperSlide" :key="index" @click="jumpToPage(item)">
                        <div>
                            <el-image class="img" :src="item.imgUrl" :fit="'fill'"></el-image>
                            <!-- <div class="ellipsis" :title="item.title">{{ item.title }}</div> -->
                            <div class="roll-box" :title="item.title">
                                <div class="text">{{ item.title }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ssbznext swiper-button-next swiper-button"></div>
                <div class="ssbzprev swiper-button-prev swiper-button"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
</template>

<script>

import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
import homepageApi from "@/api/homepage"
import $baseUrl from '@/utils/baseURL';
export default {
    name: 'App',
    components: {},
    data() {
        return {
            governmentAffairsNum: 4,
            governmentAffairsIndex: 0,
            governmentAffairsList: [
            ],
            systemsNum: 4,
            systemsIndex: 0,
            systemsList: [],
            dutyIndex: 0,
            dutyInfo: {},
            totalPageGT: 0,
            totalPageSYS: 0,
            swiperSlide: [],
            hiddenduty: true,
            endData: {}
        }
    },
    mounted() {
        this.queryDuty()
        this.queryEndPage();
        this.queryPageList();
        this.queryCarouselChart();
        this.queryGovernmentTransparencyPageList();
    },
    methods: {
        async queryEndPage() {
            let { data } = await homepageApi.queryEndPage();
            this.endData = data || {}
        },
        openCaret() {
            this.$router.push({
                path: '/navigation', query: {
                    type: 'time',
                    name: '值班表'
                }
            })
        },
        jumpURL(url) {
            window.open(url, '_blank');
        },
        jumpToPage(item) {
            if (item.jumpType == 'URL' && item.url) {
                window.open(item.url, '_blank');
            } else if (item.jumpType == 'ARTICLE' && item.articleId) {
                this.$router.push({
                    path: '/navigation', query: {
                        articleId: item.articleId,
                        name: '文章'
                    }
                })
            } else {
                console.log('无跳转')
            }
        },
        // 这个方法splitIntoChunks接受两个参数：要拆分的原始数组和每个拆分后子数组的大小。
        //它使用一个循环来遍历原始数组，并使用Array.slice()方法来提取每个大小为chunkSize的子数组，
        //然后将这些子数组推入到chunks数组中。最后，chunks数组将包含所有拆分后的子数组。
        splitIntoChunks(array, chunkSize) {
            let chunks = [];
            for (let i = 0; i < array.length; i += chunkSize) {
                let chunk = array.slice(i, i + chunkSize);
                chunks.push(chunk);
            }
            console.log(chunks)
            return chunks;
        },
        createSwiper(className, key = '') {
            console.log(`.${key}next`)
            this.$nextTick(() => {
                new Swiper(className, {
                    // autoplay: {
                    //     delay: 2500,
                    //     disableOnInteraction: false,
                    // },
                    navigation: {
                        nextEl: `.${key}next`,
                        prevEl: `.${key}prev`,
                    },
                    pagination: {
                        el: ".swiper-pagination",
                    },
                });
            })
        },
        async queryCarouselChart() {
            let { data } = await homepageApi.queryCommendation()
            let list = data || [];
            list = list.map(item => {
                return { ...item, imgUrl: `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${item.filesId}` }
            })
            console.log(list, '-------')
            this.swiperSlide = list;
            this.createSwiper('.carouselChartSwiper', 'ssbz')
        },

        async queryGovernmentTransparencyPageList() {
            let { data } = await homepageApi.queryGovernmentTransparencyPageList({ page: 1, size: 100 })
            let list = data.list || [];
            list = list.map(item => {
                return { ...item, imgUrl: `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${item.filesId}` }
            })
            this.governmentAffairsList = this.splitIntoChunks(list, 5)
            console.log('governmentAffairsList', this.governmentAffairsList)
            this.createSwiper('.governmentAffairsSwiper', 'zwgk')
        },
        async queryPageList() {
            let { data } = await homepageApi.queryPageList({ page: 1, size: 100 })
            let list = data.list || [];
            // list = list.map(item => {
            //     return { ...item, imgUrl: `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${item.filesId}` }
            // })
            this.systemsList = this.splitIntoChunks(list, 5)
            this.createSwiper('.systemsSwiper', 'cyxt')
        },
        async queryDuty() {
            let { data } = await homepageApi.queryDuty();
            console.log('值班领导', data)
            this.dutyInfo = data || {};
        },
    }
}
</script>

<style lang="scss" scoped>
.ellipsis {
    width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toolbar {
    width: 100%;
    height: 100%;

    .title {
        width: 100%;
        height: 62px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        line-height: 62px;
        color: #ffffff;
        font-size: 18px;
        font-weight: bold;
    }

    .dutyRoster {
        overflow: hidden;
        height: 240px;
        transition: all 0.3s;

        .title {
            background-image: url('../assets/zhiban.png');
        }

        .label {
            width: 100%;
            text-align: left;
            line-height: 40px;
        }
    }

    .hiddenduty {
        height: 70px;
    }

    .governmentAffairs {
        overflow: hidden;

        .title {
            background-image: url('../assets/zhengwu.png');
        }

        .label {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 14px;
            font-weight: bold;
            color: #164fa6;
            height: 50px;
            background-color: #e7f3ff;
            margin: 10px 0;
            padding-left: 30px;
            border: 1px solid #e7f3ff;
            transition: all 0.3s;

            &:hover {
                border: 1px solid #164fa6;
            }

            .icon,
            img {
                width: 27px;
                height: 27px;
                margin-right: 10px;
            }

        }
    }

    .systems {
        .title {
            background-image: url('../assets/zhengwu.png');
        }

        .label {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 14px;
            font-weight: bold;
            color: #164fa6;
            height: 60px;
            background-color: #e7f3ff;
            margin: 10px 0;
            padding-left: 30px;

            .icon {
                width: 27px;
                height: 27px;
                padding: 10px
            }

        }
    }

}

.module {
    text-align: center;
    padding-bottom: 20px;
    cursor: pointer;
}

.praise {
    width: 100%;
    height: 300px;
    overflow: hidden;
    background: url(./../assets/shishibiaozhang.png) no-repeat;
    background-size: cover;
    background-size: 100% 100%;

    .swiper-slide {
        margin-top: 5px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .img {
            width: 160px;
            height: 180px;
        }
    }
}

.dutySwiper {
    padding-bottom: 15px;
    padding-left: 15px;
    background-color: #ffffff66;
}

.mySwiper {
    height: 100%;
    position: relative;

    .swiper-pagination {
        position: absolute;
        left: 0;
        bottom: -10px;

        ::v-deep .swiper-pagination-bullet {
            width: 15px !important;
            height: 4px !important;
            background-color: #cecece;
            border-radius: 0;
            opacity: 1;
            margin-left: 6px;
        }

        ::v-deep .swiper-pagination-bullet-active {
            background-color: #164fa6;
        }
    }
}

.swiper-button {
    padding: 10px;
    color: #ffffff;
    background-color: #0000004f
}

.swiper-button-next:after,
.swiper-button-prev:after {

    font-size: 16px !important;
}

.roll-box {
    height: 24px;
    border-radius: 6px;
    width: 150px;
    position: relative;
    overflow: hidden;
}

.roll-box .text {
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;
    animation-name: roll;
    animation-duration: 20s;
    animation-timing-function: linear;
    padding-right: 20px;
    animation-iteration-count: infinite;
}

.roll-box .text:before {
    content: '';
    display: inline-block;
    width: 200px;
    height: 100%;
}

@keyframes roll {
    from {
        transform: translate(0%, 0);
    }

    to {
        transform: translate(-100%, 0);
    }
}
</style>